到了最後的幾天...
不知道能寫些甚麼，
從W3School上看到slide show的作法
來邊做邊學吧!

<!-- 先做一個Slideshow container -->
<div class="slideshow-container">
</div>

<div class="slideshow-container">
	<div class="mySlides">
		<img src="https://dummyimage.com/600x400/000/ffffff&text=Slide+1">
		<div>First picture</div>
	</div>
	<div class="mySlides">
		<img src="https://dummyimage.com/600x400/333/ffffff&text=Slide+2">
		<div>Second picture</div>
	</div>
	<div class="mySlides">
		<img src="https://dummyimage.com/600x400/999/ffffff&text=Slide+3">
		<div>Third picture</div>
	</div> <!-- 加上三張要slideshow的圖片 -->
	<a>&#10094;</a>
	<a>&#10095;</a> <!-- "<"、">"兩種符號，可以點擊下一張和上一張 -->
</div>
<br>
<div>
	<span></span> 
	<span></span> 
	<span></span> 
</div> <!-- 加上可以點擊的小點，點擊可以換圖片的那種 -->

接著加上樣式，

.slideshow-container {
	 max-width: 600px;
	 position: relative;  
	 margin: auto;
}

/* 設定slide show的圖片先不顯示 */
.mySlides {
	display: none;
	/* 將圖片預設為不要顯示 */
}

/* 設定兩個在圖片左右兩邊的箭號 */
.prev, .next {
	cursor: pointer;
	/* 改變滑鼠游標的造型，變成手指 */
	position: absolute;
	/* 相對於它的父元素(slideshow-container)進行定位 */
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 18px;
	color: white;
	font-weight: bold;
	font-size: 18px;
}

/* 將下一張的按鈕放置到slide的最右方 */
.next {
  right: 0;
}

/* 下方 picture的 text說明 */
.text {
  color: #fff;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* slide show下方的 dot，點擊可以切換圖片 */
.dotBar {
  text-align: center;
}

.dot {
  cursor:pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  display: inline-block;
}

/* active以及hover的 dot會改變顏色 */
.active, .dot:hover {
  background-color: #717171;
}

在HTML上加上class

<div class="slideshow-container">
	<div class="mySlides">
		<img src="https://dummyimage.com/600x400/000/ffffff&text=Slide+1">
		<div class="text">First picture</div>
	</div>
	<div class="mySlides">
		<img src="https://dummyimage.com/600x400/333/ffffff&text=Slide+2">
		<div class="text">Second picture</div>
	</div>
	<div class="mySlides">
		<img src="https://dummyimage.com/600x400/999/ffffff&text=Slide+3">
		<div class="text">Third picture</div>
	</div> <!-- 加上三張要slideshow的圖片 -->
	<a class="prev">&#10094;</a>
	<a class="next">&#10095;</a> <!-- "<"、">"兩種符號，可以點擊下一張和上一張 -->
</div>
<br>
<div class="dotBar">
	<span class="dot"></span> 
	<span class="dot"></span> 
	<span class="dot"></span> 
</div> <!-- 加上可以點擊的小點，點擊可以換圖片的那種 -->

明天來加上JavaScript